import React, { useEffect, useState } from 'react'
import { NavBar, Cell } from '@nutui/nutui-react'
import { List } from 'antd-mobile'
import { ArrowLeft } from '@nutui/icons-react'
import '@nutui/nutui-react/dist/style.css'
import { ActionSheet } from '@nutui/nutui-react'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
export default function Information() {
    let navigate = useNavigate()
    const [isVisible, setIsVisible] = useState(false)
    const [isVisibles, setIsVisibles] = useState(false)
    const [vals, setVals] = useState('')
    const [val, setVal] = useState('')
    let data = sessionStorage.getItem('piao')
    let [id,setId] = useState("66680edd99dcf23902953a43")
    let [datas, setDatas] = useState([])
    useEffect(() => {
       getuser(id) 
    },[vals])
    let getuser = async(id)=>{
        let res = await axios.get("http://123.57.180.216:3000/userdata",{params:{_id:id}})
        // console.log(res.data.list);
        setDatas(res.data.list)
    }
    const option = [
        {
            name: '拍照',
        },
        {
            name: '从相册选择',
        },
    ];
    const options = [
        {
            name: '男',
        },
        {
            name: '女',
        },
    ];
    const handleSelect = (item) => {
        setVal(item.name)
        setIsVisible(false)
    }
    const handleSelects = (item) => {
        console.log(item);
        setVals(item.name)
        edit(id,item.name)
        getuser(id)
        setIsVisibles(false)
    }
    let edit = async(id,vals) => {
        let obj = {
            _id: id,
            gender:vals
        }
        await axios.post("http://123.57.180.216:3000/editgender",obj)
    }
    return (
        <div>
            <NavBar
                back={
                    <>
                        <ArrowLeft />
                    </>
                }
                onBackClick={() => navigate("/settings")}
            >
                账号资料
            </NavBar>
            <List>
                <List.Item onClick={() => setIsVisible(!isVisible)}>
                    头像
                    <img src='./logo512.png' style={{ width: "20px", height: "20px", marginLeft: "80%" }} alt=''></img>
                </List.Item>
            </List>
            <Cell onClick={() => { }}>
                用户ID
                <span style={{ marginLeft: "38%" }}>{datas._id}</span>
            </Cell>
            <List>
                <List.Item onClick={() => navigate("/nickname")}>
                    昵称
                    <span style={{ marginLeft: "65%" }}>{datas.nickname}</span>
                </List.Item>
                <List.Item onClick={() => setIsVisibles(!isVisibles)}>
                    性别
                    <span style={{ marginLeft: "85%" }}>{datas.gender}</span>
                </List.Item>
                <List.Item onClick={() => navigate("/profile")}>
                    <span>简介</span><br></br>
                    <span >{datas.intro}</span>
                </List.Item>
            </List>
            <ActionSheet
                visible={isVisible}
                cancelText="取消"
                options={option}
                onSelect={handleSelect}
                onCancel={() => setIsVisible(false)}
            />
            <ActionSheet
                visible={isVisibles}
                cancelText="取消"
                options={options}
                onSelect={handleSelects}
                onCancel={() => setIsVisible(false)}
            />
        </div>
    )
}
